<template>
  <!--货物信息-->
  <div class="load-information-index">
    <order-module-title title="货物信息"/>
    <div class="load-information-body">
      <div class="body-item">
        <span style="color: red">*</span>
        货名
      </div>
      <div class="body-item">
        规格型号
      </div>
      <div class="body-item">
        <span style="color: red">*</span>
        总包装
      </div>
      <div class="body-item">
        <span style="color: red">*</span>
        总数量
      </div>
      <div class="body-item">
        <span style="color: red">*</span>
        总重量kg
      </div>
      <div class="body-item">
        <span style="color: red">*</span>
        总体积m3
      </div>

      <el-button class="body-item-button" v-if="ifShow" @click="add">+ 添加</el-button>
      <div class="body-item" v-if="!ifShow"></div>
      <div class="body-hidden-load-info" v-if="data.loadInformation.length !== 0">
        <div v-for="(item, index) in data.loadInformation" :key="index">
          <div class="body-item">
            <el-input type="text" v-model="item.name"/>
          </div>
          <div class="body-item">
            <el-input type="text" placeholder="例：1x0.8"
                      v-model="item.specifications"/>
          </div>
          <div class="body-item">
            <el-select v-model="item.wraps" placeholder="请选择">
              <el-option
                  v-for="item in options"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value">
              </el-option>
            </el-select>
          </div>
          <div class="body-item">
            <el-input type="text" @change="addSumQ(item.quantity, index)" v-model="item.quantity"/>
          </div>
          <div class="body-item">
            <el-input type="text" @change="addSumW(item.weights, index)" v-model="item.weights"/>
          </div>
          <div class="body-item">
            <el-input type="text" @change="addSumV(item.volumes, index)" v-model="item.volumes"/>
          </div>
          <el-button class="body-item-button"  v-if="ifShow"
                     @click="deleteInfo(index,item.quantity,item.weights,item.volumes)">删除
          </el-button>
          <div class="body-item"  v-if="!ifShow"></div>
          <div style="clear: both"></div>
        </div>
      </div>
      <div class="body-item-total" v-if="ifShow">
        <span>合计</span>
      </div>
      <el-input class="body-item" v-if="ifShow" v-model="data.total.quantity"
                type="text" readonly></el-input>
      <el-input class="body-item" v-if="ifShow" v-model="data.total.weight"
                type="text" readonly></el-input>
      <el-input class="body-item" v-if="ifShow" v-model="data.total.volume"
                type="text" readonly></el-input>

      <!--      补全表格-->
      <div class="body-item"  v-if="ifShow" style="border-right: none">----</div>
      <div style="clear: both"></div>
    </div>
  </div>
</template>

<script>
import OrderModuleTitle from "@/components/order/component/OrderModuleTitle";
import {addCommon} from "@/utils/constant/listElementCompute";

export default {
  name: "LoadInformation",
  props: {
    ifShow: Boolean,
    info: {},
  },
  components: {
    OrderModuleTitle,
  },
  data() {
    return {
      quantity: [],
      weight: [],
      volume: [],
      data: {
        loadInformation: [],
        total: {
          quantity: 0.0,
          weight: 0.0,
          volume: 0.0,
        },
      },
      options: [
        {
          value: '袋',
          label: '袋'
        }, {
          value: '桶',
          label: '桶'
        }, {
          value: '箱',
          label: '箱'
        }, {
          value: '个',
          label: '个'
        }, {
          value: '台',
          label: '台'
        }, {
          value: '卷',
          label: '卷'
        }, {
          value: '其他',
          label: '其他'
        }],
    }
  },
  created() {
    this.add()
  },
  watch: {
    info: function (newValue, oldValue) {
      if (newValue !== undefined) {
        this.data = newValue
      }
    }
  },

  methods: {
    // TODO 最大数量限定
    // 添加货物信息
    add() {
      this.data.loadInformation.push({
        name: '',
        specifications: '',
        quantity: 0.0,
        wraps: '',
        weights: 0.0,
        volumes: 0.0
      })
    },
    // 删除货物信息
    deleteInfo(index, q, w, v) {
      this.data.loadInformation.splice(index, 1)
      this.quantity.splice(index, 1)
      this.deleteNum(index, q, w, v)
    },

    // 实时更新总数
    addSumQ(count, index) {
      this.data.total.quantity = this.infoFlag(addCommon(this.quantity, count, index))
    },
    addSumW(count, index) {
      this.data.total.weight = this.infoFlag(addCommon(this.weight, count, index))
    },
    addSumV(count, index) {
      this.data.total.volume = this.infoFlag(addCommon(this.volume, count, index))
    },
    //删除数据并更新
    deleteNum(index, q, w, v) {
      // 删除列表中的数据
      this.quantity.splice(index, 1)
      this.weight.splice(index, 1)
      this.volume.splice(index, 1)
      this.data.total.quantity -= q
      this.data.total.weight -= w
      this.data.total.volume -= v
    },
    // 数据格式输入错误
    infoFlag(flag) {
      if (flag === -1) {
        this.$message.info("请输入正确格式的数据")
      } else {
        return flag
      }
    }


  }

}
</script>

<style scoped lang="scss">

.load-information-index {
  margin-top: 20px;

  .load-information-body {
    margin: 10px 0;
    width: 150px * 7 + 2px;
    border-top: 1px black solid;
    border-left: 1px black solid;
    border-right: 1px black solid;


    .body-item {
      text-align: center;
      height: 42px;
      line-height: 42px;
      width: 150px;
      float: left;
      border-right: 1px black solid;
      border-bottom: 1px black solid;
    }

    .body-item-total {
      text-align: center;
      height: 42px;
      line-height: 42px;
      width: 150px * 3;
      float: left;
      border-right: 1px black solid;
      border-bottom: 1px black solid;
    }

    .body-item-button {
      float: left;
      width: 150px;
      height: 42px;
      border-bottom: 1px black solid;
    }

    .body-hidden-load-info {
      width: 150px * 7;
    }

  }


}


</style>